<template>
  <div
    id="print-iframe-ll"
  >
      <div
        style="
          flex: 1;
          display:flex;
          flex-direction: column;
            align-items: center;
          font-size: 14px !important;
          padding: 5px 0;
        "
      >
        <div>申楷桢防伪科技技术(苏州)有限公司&nbsp;</div>
        <div>
        缴库单
        </div>
      </div>
    <div style="display: flex; padding: 10px 0; flex-wrap:wrap;line-height: 1.5em;font-size: 12px">
      <div style="width: 33%;">订单单号:  {{ productFrom.baseData.xieYiShuHao }}</div>
      <div style="width: 33%;">缴库单号:  {{ productFrom.baseData.handInBillNo }}</div>
      <!-- <div style="width: 33%;">生产单号:  {{ productFrom.baseData?productFrom.baseData.handInBillNo : '' }}</div> -->
      <div style="width: 33%;">所属客户:  {{ productFrom.baseData.customerName }}</div>
      <div style="width: 33%;">产品名称:  {{ productFrom.baseData.productName }}</div>
    </div>
    <div
      style="
        border: 1px solid #000;
        overflow: hidden;
        box-sizing: border-box;
      "
    >
      <div style="border-bottom: 1px solid #000; display: flex;font-size: 12px">
        <div style="display: flex;  flex: 1;text-align: center;">
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">纸箱规格</div>
          <div style="width: 35%;border-right: 1px solid #000;padding: 2px;">包装描述</div>
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">每箱数量</div>
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">缴库箱数</div>
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">实际数量</div>
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">公斤数</div>
          <div style="width: 20%;padding: 2px;">备注</div>
        </div>
      </div>
      <div
        v-for="(cItem,index) in productFrom.mxDataList"
        :key="index"
        style="display: flex"
        :style="{ borderBottom: index+1 <productFrom.mxDataList.length ? '1px solid': '' }"
      >
        <div style="display: flex;  flex: 1;text-align: center;font-size: 12px">
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">{{ cItem.cartonSizeName }}</div>
          <div style="width: 35%;border-right: 1px solid #000;padding: 2px;">{{ cItem.packageDescription }}</div>
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">{{ cItem.eachBoxQuantity }}</div>
          <div style="width: 15%;border-right: 1px solid #000;padding: 2px;">{{ cItem.handInBoxs }}</div>
          <div style="width: 15%;padding: 2px;border-right: 1px solid #000;padding: 2px;">{{ cItem.handInQuantity }}</div>
          <div style="width: 15%;padding: 2px;border-right: 1px solid #000;padding: 2px;">{{ cItem.kilogramQuantity }}</div>
          <div style="width: 20%;padding: 2px;">{{ cItem.handInMxRemark }}</div>
        </div>
      </div>
    </div>
    <div style="display: flex;font-size: 12px">
      <div style="flex: 1;
        display: flex;
        justify-content: flex-start;"><span>缴库人员：</span><span>{{ productFrom.baseData.createPersonName }}</span></div>
      <div style="flex: 1;
        display: flex;
        justify-content: flex-start;"><span>缴库时间：</span><span>{{ productFrom.baseData.createDate }}</span></div>
      <div style="flex: 1;
        display: flex;
        justify-content: flex-start;"><span>接收人员：</span><span></span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrintOrderLL',
  props: {
    productFrom: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    }
  },
  watch: {
    productFrom: {
      deep: true,
      handler(val) {
      }
    }
  },
  created() {
    console.log(this.productFrom)
  },
  methods: {
  }
}
</script>

<style>
    .footer{
        display: flex;
    }
    .footer>div{
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }
</style>
